<template>
  <div class="boxss">
    <div class="flex flexa flexJ">
      <div class="titles">经营数据</div>
      <div class="segmented-controls flex flexa">
        <div @click="toggle(1)" class="segments" :class="{active:tongjiData.dataRange==1}">今天</div>
        <div @click="toggle(2)" class="segments" :class="{active:tongjiData.dataRange==2}">昨天</div>
        <div @click="toggle(3)" class="segments" :class="{active:tongjiData.dataRange==3}">本月</div>
      </div>
    </div>
    <div class="grid grid-col-1">
      <div class="grid-item grid-item-1">
        <div class="flex flexa">
          <div class="flex-l">
            <div class="title-1">回收订单</div>
            <div class="num">数量:
              <span v-if="checkPermi(['home:recycling:orders'])">{{ backOrder.totalNumber }}</span>
              <span v-else>***</span>
            </div>
           
            <div class="num">
              金额: <span v-if="checkPermi(['home:recycling:orders'])">{{backOrder.totalPrice}}</span>
              <span v-else>***</span>
            </div>
          </div>
          <div class="flex-img">
            <img src="@/assets/img/index/comp1-1.png" alt="回收订单">
          </div>
        </div>
      </div>
      <div class="grid-item grid-item-2">
        <div class="flex flexa">
          <div class="flex-l">
            <div class="title-1">商品发布</div>
            <div class="num">数量: <span v-if="checkPermi(['home:Inventory:statistics'])">{{ goodPush.totalNumber }}</span>
            <span v-else>***</span>
            </div>
            <div class="num">
              金额: <span v-if="checkPermi(['home:Inventory:statistics'])">{{ goodPush.totalPrice }}</span>
              <span v-else>***</span>
            </div>
          </div>
          <div class="flex-img">
            <img src="@/assets/img/index/comp1-2.png" alt="商品发布">
          </div>
        </div>
      </div>
      <div class="grid-item grid-item-3">
        <div class="flex flexa">
          <div class="flex-l">
            <div class="title-1">销售订单</div>
            <div class="num">数量: <span v-if="checkPermi(['home:sale:order'])">{{ saleOrder.totalNumber }}</span>
               <span v-else> ***</span>
            </div>
            <div class="num">
              金额: <span v-if="checkPermi(['home:sale:order'])">{{ saleOrder.totalPrice }}</span>
              <span v-else> ***</span>
            </div>
          </div>
          <div class="flex-img">
            <img src="@/assets/img/index/comp1-3.png" alt="销售订单">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import homeApi from "@/api/home/newIndex";
export default {
  data() {
    return {
      tongjiData: {
        dataRange: 1,

      },
      backOrder: {},
      goodPush: {},
      saleOrder: {},

    }
  },
  mounted() {
    this.getTongjiData()
  },
  methods: {
    toggle(index) {
      this.tongjiData.dataRange = index
      this.getTongjiData()
    },
    getTongjiData() {
      homeApi.getBusiness(this.tongjiData).then(res => {

        this.backOrder = res.data.backOrder
        this.goodPush = res.data.goodPush
        this.saleOrder = res.data.saleOrder
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import url('./style.css');

.boxss {
  box-sizing: border-box;
}

.grid-col-1 {
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;

  .grid-item {
    margin-top: 16px;
    padding: 8px 16px 6px 8px;
    border-radius: 6px;

  }

  .grid-item-1 {
    background: linear-gradient(142deg, #F2F4FF 0%, #F2F4FF 100%);
  }

  .grid-item-2 {
    background: linear-gradient(142deg, #FFF6EE 0%, #FFF6EE 100%);
  }

  .grid-item-3 {
    background: linear-gradient(142deg, #FFEEF0 0%, #FFEEF0 100%);
  }

  .title-1 {
    font-size: 14px;
    color: #000000;
    margin-bottom: 4px;
  }

  .num {
    margin-bottom: 2px;
    font-size: 12px;
    color: #8F92A1;

    span {
      font-size: 16px;
      color: #333333;
    }
  }

  .flex-img {
    flex: 0 0 26px;

    img {
      width: 100%
    }
  }

}
</style>
